<script lang="ts" setup>

import { toRef } from 'vue';
import { watch } from 'vue';
import { toRefs, ref } from 'vue';

interface TablePaginationType {
  pageIndex?: number,
  pageSize?: number,
  total: number,
  //每页显示个数选择器的选项设置	
  pageSizes?: number[],
  //每页默认的条目个数，不设置时默认为10
  defaultPageSize?: number,
  //组件布局，子组件名用逗号分隔
  layout?: string,
  sizeChange?: Function,
  currentChange?: Function,
  prevClick?: Function,
  nextClick?: Function,
  [key: string]: any
}
const props = withDefaults(defineProps<TablePaginationType>(),
  {
    pageIndex: 1,
    pageSize: 20,
    total: 0
  })
const emit = defineEmits(['update:pageIndex', 'update:pageSize'])
const paginationRef = ref()
const pageIndex = toRef(props.pageIndex)
const pageSize = toRef(props.pageSize)
watch(() => pageIndex.value, (n) => {
  emit('update:pageIndex', n)

})
watch(() => pageSize.value, (n) => {
  emit('update:pageSize', n)
})

defineExpose({ paginationRef })
</script>

<template>
  <el-pagination ref="paginationRef" small class="p-1 justify-center" v-model:current-page="pageIndex"
    v-model:page-size="pageSize" :page-sizes="props.pageSizes || [10, 30, 50, 100]"
    :layout="props.layout || 'total, sizes, prev, pager, next, jumper'" :total="props.total" />
</template>
<style lang="scss" scoped></style>